<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="handleChange"
        />
    </div>
</template>

<script setup>
import { uploadFile } from '@/api/api';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const emit = defineEmits(['handleChange']);
const props = defineProps({
    content: ''

});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = 'default' // 或 'simple'
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
        valueHtml.value = props.content
    }, 500)
})
const toolbarConfig = {}
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        // 上传图片
        uploadImage: {
            async customUpload (file, insertFn) {                   // JS 语法
                let form = new FormData();
                form.append("file", file);
                const res = await uploadFile(form);
                // file 即选中的文件
                // 自己实现上传，并得到图片 url alt href
                // 最后插入图片
                insertFn(res.msg)
            }
        },
        // 上传图片
        uploadVideo: {
            async customUpload (file, insertFn) {                   // JS 语法
                let form = new FormData();
                form.append("file", file);
                const res = await uploadFile(form);
                // file 即选中的文件
                insertFn(res.msg)
            }
        },
    }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const handleChange = (editor) => {
    emit("handleChange", editor.getHtml());
}

</script>     
